<template>
    <div class='top-bar' :class="{ 'highlight':highlight }" ref="topBarRef">
        <div class="inner">
            <div class="logo"/>
            <div class="navIcon" @click="showAllNav"/>
        </div>
        <allNav :navList="navList" v-model="isShowAllNav"></allNav>
    </div>
</template>

<script setup lang="ts">
import { getNavList } from '@/webApi/new'
import navIcon from '@/assets/images/mobile-nav-icon-white.png'
import allNav from './components/allNav.vue'
const navList:Ref<Array<{
    id: number,
    path: string,
    name: string,
    children: Array<{
        id: number,
        name: string,
    }>
}>> = ref([])
getNavList().then(res => {
	navList.value = res
})
const isShowAllNav:Ref<boolean> = ref(false)
const showAllNav = ():void => {
    isShowAllNav.value = true
}
const topBarRef:Ref<HTMLElement|null> = ref(null)
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
const highlight:Ref<boolean> = ref(false)
function handleScroll() {
    console.log(topBarRef.value?.offsetHeight);
    console.log(window.scrollY);
  const navHeight = topBarRef.value?.offsetHeight || 0
  highlight.value = window.scrollY >= navHeight
}
</script>

<style lang="scss" scoped>
.top-bar{
    background: rgba(0, 0, 0, 0.67);
    box-shadow: 1px 2px 10px #0000002f;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    .inner{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .logo{
            background: url('@/assets/images/logo.png') no-repeat center center;
            width: 130px;
            height: 45px;
            margin-left: 10px;
            background-size: 130px auto;
        }
        .navIcon{
            width: 40px;
            height: 50px;
            margin-right: 10px;
            background: url('@/assets/images/mobile-nav-icon-white.png') no-repeat center center;
            background-size: 25px auto;
        }
    }
    &.highlight{
        background-color: #e6e6e6;
        .inner{
            .logo{
                width: 130px;
                height: 45px;
                margin-left: 10px;
                background: url('@/assets/images/logo-black.png') no-repeat center center;
                background-size: 130px auto;
            }
            .navIcon{
                background: url('@/assets/images/nav-icon-black.png') no-repeat center center;
                width: 40px;
                height: 50px;
                margin-right: 10px;
                background-size: 25px auto;
            }
        }
    }
}
</style>